<template>
    <ul class="ul" style="display:flex;flex-wrap: wrap;flex-direction:row">
        <li>
            <span>内容:</span>
            <el-input v-model="content" style="width:200px" placeholder="输入笔记"></el-input>
        </li>
        <li> <span>视频:</span>
            <el-select v-model="videoName" filterable placeholder="请选择视频">
                <el-option v-for="item in options" :key="item.courseCatalogId" :label="item.courseVideoName" :value="item.courseVideoName" />
            </el-select>
        </li>
        <li> <span>用户:</span>
            <el-input v-model="userName" style="width:200px" placeholder="输入用户名"></el-input>
        </li>
        <li>
            <el-date-picker v-model="time" type="daterange" range-separator="~" start-placeholder="开始时间"
                end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </li>
        <li>
            <el-button type="primary" icon="Search" @click="search">查询</el-button>
            <el-button type="danger" style="" @click="empty">清空</el-button>
        </li>
    </ul>
    <el-table v-loading="listLoading"  :data="notesList" style="width: 100%;" :row-key="notesList.courseNotesId"
        :border="true" default-expand-all :stripe="true" :highlight-current-row="true" empty-text="好像没有数据哎"
        :scrollbar-always-on="true">
        <el-table-column prop="courseNotesId" label="编号" />
        <el-table-column prop="courseNotesContent" label="笔记内容"/>        
        <el-table-column prop="courseVideoName" label="所属视频" />
        <el-table-column prop="userName" label="所属用户" />
        <el-table-column prop="courseNotesCreateDate" :formatter="formatTime" label="创建时间" />
        <el-table-column v-slot="scope" label="操作">
            <el-button type="success" @click="edit(scope.row,scope.$index)">修改</el-button>
            <el-button type="danger" @click="del(scope.row,scope.$index)">删除</el-button>
        </el-table-column>
    </el-table>
    <el-pagination style="margin-top:30px" background layout="prev, pager, next" :page-sizes="[2, 4, 6, 8]"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" v-model:page-size="size"
        v-model:current-page="curr" class="mt-4" />


    <el-dialog v-model="dialogFormVisible" :width="400" :draggable="true" :center="true" title="修改笔记">
        <el-form>
            <el-form-item>
                <label>
                    笔记编号:
                </label>
                <el-input disabled  v-model="notesId" />               
            </el-form-item>
            <el-form-item>
                <label>
                    笔记内容:
                </label>
                <el-input type="textarea"  v-model="notesContent" />               
            </el-form-item>
            <el-form-item>
                <label>
                    所属视频:
                </label>
                <el-select v-model="courseVideoName" filterable placeholder="请选择视频">
                <el-option v-for="item in options" :key="item.courseVideoId" :label="item.courseVideoName" :value="item.courseVideoId" />
            </el-select>           
            </el-form-item>
            <el-form-item>
                <label>
                    所属用户:
                </label>
                <el-select filterable  v-model="upUserName" >
                    <el-option v-for="(user) in userList" :value="user.userId" :label="user.userName" :key="user.userId"></el-option>
                </el-select>               
            </el-form-item>
            <el-form-item>
                <label>
                    创建时间:
                </label>
                <el-input disabled  v-model="createTime" />               
            </el-form-item>
            <el-form-item>
               <el-button @click="submit" type="primary">保存</el-button> 
               <el-button @click="dialogFormVisible=false">取消</el-button>    
            </el-form-item>
            
        </el-form>
   </el-dialog>
</template>

<script setup>
import { onMounted, watch } from '@vue/runtime-core';
import axios from 'axios'
import moment from 'moment'
import store from '@/store'
import { ElMessage } from 'element-plus';
const { ref, reactive } = require("@vue/reactivity");
let curr = ref(1)
let size = ref(10)
let total = ref(0)
let listLoading = ref(false)
let notesList = ref([])
let content = ref('')
let videoName = ref()
let userName = ref()
let time = ref([]);
let options=ref([])
let dialogFormVisible=ref(false)
//修改笔记id
let notesId=ref();
//修改笔记内容
let notesContent=ref();
//所属视频
let courseVideoName=ref()
//所属用户
let upUserName=ref()
//创建时间
let createTime=ref();
let userList=ref([]);
// let usermap=reactive()

function getData() {
    axios.get('/api/courseNotes/selectNotesAll', {
        params: {
            curr: curr.value,
            size: size.value,
            videoName: videoName.value,
            userName: userName.value,
            content: content.value,
            startTime: time.value[0] == null ? null : moment(time.value[0]).format("YYYY-MM-DD"),
            endTime: time.value[1] == null ? null : moment(time.value[1]).format("YYYY-MM-DD")
        }
    }).then((rs) => {
        store.commit('courseNotesData', rs.data.data)
        notesList.value = store.state.courseNotesData
        getVideoName();
        getUserNameAndUserId()
    })
}

watch(courseVideoName,(newName)=>{ 
    console.log("newName:"+typeof(newName))
   
})

function getVideoName(){
    axios.get('/api/selectVideoAll').then((rs)=>{
           options.value=rs.data.data
        
        })
}

function getUserNameAndUserId(){
    axios.get('/api/user/selectAllUsers').then((rs)=>{
            userList.value=rs.data.data
        })    
}

onMounted(() => {
    getData()
})
function search() {
    getData()
}
function empty() {
    videoName.value = '',
        userName.value = '',
        content.value = '',
        time.value = 0;
        getData()
}
watch(time, (newTime, oldTime) => {
    if (newTime == null) {
        time.value = 0;
    }
})
function edit(row,index){
    dialogFormVisible.value=true;
    notesId.value=row.courseNotesId
    notesContent.value=row.courseNotesContent
    courseVideoName.value=row.courseVideoName
    upUserName.value=row.userName
    createTime.value=moment(row.courseNotesCreateDate).format("YYYY-MM-DD hh:mm:ss") 
}
function submit(){
     if(typeof(courseVideoName)=="string"){
        console.log("string")
    }
    if(typeof(newName)=="number"){
        console.log("number")
    }
    axios.put('/api/courseNotes/updateNotes',{
       courseVideoId:typeof(courseVideoName.value)=="string"?0:courseVideoName.value,
       courseNotesUserId:typeof(upUserName.value)=="string"?0:courseVideoName.value,
       courseNotesContent:notesContent.value,
        courseNotesId: notesId.value
    }).then((rs)=>{
        if(rs.data.code===200){
            ElMessage.success("修改成功!")
            getData();
            dialogFormVisible.value=false;

        }else{
            ElMessage.error("修改失败!")
        }
        
    })
}
function del(row){
    axios.delete('/api/courseNotes/deleteNotes',{params:{id:row.courseNotesId}}).then((rs)=>{
        if(rs.data.code===200){
            ElMessage.success("删除成功!")
            getData();
        }else{
            ElMessage.error("删除失败!")
        }
    })
}
//数据条数改变后
function handleSizeChange() {
    getData();
}
//当前页改变后
function handleCurrentChange() {
    getData();
}
function formatTime(row) {
    return moment(row.courseNotesCreateDate).format("YYYY-MM-DD hh:mm:ss")
}

</script>

<style>
.ul li:last-child .el-button {
    width: 80px
}

.ul li {
    /* border:1px solid; */
    list-style-type: none;
    margin-bottom: 20px;
    margin-right: 20px;
}

.ul {
    margin: 0px;
    padding: 0px
}
.mt-4 {
    margin-left: 35%;
}
</style>